<template>
  <div class="finance-page">
    <!-- 页面标题和顶部信息 -->
    <div class="page-header">
      <div class="header-left">
        <h2>财务收支记录</h2>
        <div class="month-selector">
          <select v-model="selectedMonth">
            <option v-for="month in months" :key="month.value" :value="month.value">{{ month.label }}</option>
          </select>
        </div>
      </div>
      <div class="reimbursement-card">
        <div class="reimbursement-icon">
          <span>报销</span>
        </div>
        <div class="reimbursement-info">
          <div class="info-title">我的报销记录</div>
          <div class="info-title">报销被驳回</div>
        </div>
      </div>
    </div>

    <!-- 收入与报销卡片 -->
    <div class="finance-cards">
      <div class="finance-card income-card">
        <div class="card-header">
          <div class="card-title">XXXXX名字</div>
          <span class="tag income-tag">收入</span>
        </div>
        <div class="divider"></div>
        <div class="card-content">
          <div class="finance-item">
            <span>基础底薪</span>
            <span class="amount">￥1000.00</span>
          </div>
          <div class="finance-item">
            <span>补贴提成</span>
            <span class="amount">￥3000.00</span>
          </div>
          <div class="finance-item total">
            <span>累计收入</span>
            <span class="amount">￥4000.00</span>
          </div>
        </div>
      </div>

      <div class="finance-card reimbursement-card">
        <div class="card-header">
          <div class="card-title">现金报销</div>
          <span class="tag reimbursement-tag">报销</span>
        </div>
        <div class="divider"></div>
        <div class="card-content">
          <div class="finance-item">
            <span>报销金额</span>
            <span class="amount">￥800.00</span>
          </div>
          <div class="finance-item">
            <span>已报金额</span>
            <span class="amount">￥700.00</span>
          </div>
          <div class="finance-item total">
            <span>未报金额</span>
            <span class="amount">￥100.00</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 财务记录表格 -->
    <div class="finance-table-container">
      <table class="finance-table">
        <thead>
          <tr>
            <th v-for="header in tableHeaders" :key="header">{{ header }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.date }}</td>
            <td>{{ item.days }}</td>
            <td>{{ item.name }}</td>
            <td>￥{{ item.amount.toLocaleString() }}</td>
            <td>
              <span class="status-tag" :class="item.statusClass">{{ item.status }}</span>
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 分页控件 -->
      <div class="pagination">
        <button class="page-btn" :disabled="currentPage === 1" @click="currentPage--">
          &lt; 上一页
        </button>
        <span class="page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
        <button class="page-btn" :disabled="currentPage === totalPages" @click="currentPage++">
          下一页 &gt;
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 月份选择器数据
const selectedMonth = ref('2025-08')
const months = ref([
  { label: '2025年8月', value: '2025-08' },
  { label: '2025年7月', value: '2025-07' },
  { label: '2025年6月', value: '2025-06' },
  { label: '2025年5月', value: '2025-05' },
  { label: '2025年4月', value: '2025-04' },
])

// 表格数据
const tableHeaders = ref(['订单日期', '天数', '场次名称', '订单总金额', '订单审核状态'])

const tableData = ref([
  { date: '2025/08/03', days: 2, name: '南京摄影(婚礼)', amount: 3000, status: '已通过', statusClass: 'approved' },
  { date: '2025/08/05', days: 1, name: '上海产品拍摄', amount: 1500, status: '已通过', statusClass: 'approved' },
  { date: '2025/08/10', days: 3, name: '北京商业广告', amount: 6000, status: '审核中', statusClass: 'reviewing' },
  { date: '2025/08/12', days: 2, name: '杭州婚纱摄影', amount: 2800, status: '已通过', statusClass: 'approved' },
  { date: '2025/08/15', days: 1, name: '广州活动拍摄', amount: 1200, status: '未通过', statusClass: 'rejected' },
  { date: '2025/08/18', days: 4, name: '深圳电商拍摄', amount: 4800, status: '已通过', statusClass: 'approved' },
  { date: '2025/08/20', days: 2, name: '成都品牌宣传', amount: 3200, status: '审核中', statusClass: 'reviewing' },
  { date: '2025/08/22', days: 1, name: '重庆美食摄影', amount: 1000, status: '已通过', statusClass: 'approved' },
  { date: '2025/08/25', days: 3, name: '武汉商业活动', amount: 3600, status: '已通过', statusClass: 'approved' },
  { date: '2025/08/28', days: 2, name: '西安旅游宣传', amount: 2400, status: '未通过', statusClass: 'rejected' },
])

// 分页
const currentPage = ref(1)
const itemsPerPage = ref(10)
const totalPages = computed(() => Math.ceil(tableData.value.length / itemsPerPage.value))
</script>

<style scoped lang="less">
.finance-page {
  padding: 20px;
}

/* 页面标题区域 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  
  .header-left {
    display: flex;
    align-items: center;
    
    h2 {
      margin: 0;
      margin-right: 20px;
      font-size: 20px;
      font-weight: 600;
      color: #323335;
    }
    
    .month-selector {
      select {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: white;
        color: #323335;
        font-size: 14px;
      }
    }
  }
  
  .reimbursement-card {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    
    .reimbursement-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #92bcb8;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      
      span {
        color: white;
        font-size: 12px;
      }
    }
    
    .reimbursement-info {
      .info-title {
        font-size: 14px;
        color: #696d70;
      }
      
      .info-detail {
        font-size: 16px;
        font-weight: 500;
        color: #696d70;
      }
    }
  }
}

/* 财务卡片区域 */
.finance-cards {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  
  .finance-card {
    flex: 1;
    padding: 20px;
    border-radius: 8px;
    
    &.income-card {
      background-color: #eef5ff;
    }
    
    &.reimbursement-card {
      background-color: #eaf9f4;
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      
      .card-title {
        font-size: 16px;
        font-weight: 500;
        color: #323335;
      }
      
      .tag {
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
        
        &.income-tag {
          background-color: #3f91f7;
          color: white;
        }
        
        &.reimbursement-tag {
          background-color: #54ad81;
          color: white;
        }
      }
    }
    
    .divider {
      height: 1px;
      background-color: rgba(0, 0, 0, 0.1);
      margin-bottom: 16px;
    }
    
    .card-content {
      .finance-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        font-size: 14px;
        color: #555;
        
        &.total {
          font-weight: 600;
          color: #323335;
          margin-top: 8px;
          padding-top: 8px;
          border-top: 1px dashed rgba(0, 0, 0, 0.1);
        }
        
        .amount {
          font-weight: 500;
        }
      }
    }
  }
}

/* 表格区域 */
.finance-table-container {
  margin-bottom: 20px;
  
  .finance-table {
    width: 100%;
    border-collapse: collapse;
    
    th, td {
      padding: 12px;
      text-align: left;
      border-bottom: 1px solid #eee;
    }
    
    th {
      font-weight: 500;
      color: #606266;
      background-color: #f5f5f5;
    }
    
    .status-tag {
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
      
      &.approved {
        background-color: #e7f6f1;
        color: #54ad81;
      }
      
      &.reviewing {
        background-color: #e8f5fe;
        color: #3c92f6;
      }
      
      &.rejected {
        background-color: #fcf2e6;
        color: #ea8634;
      }
    }
  }
  
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    
    .page-btn {
      padding: 8px 16px;
      background-color: #f4f5f7;
      border: 1px solid #ddd;
      border-radius: 4px;
      cursor: pointer;
      color: #555;
      
      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      
      &:hover:not(:disabled) {
        background-color: #e9ecef;
      }
    }
    
    .page-info {
      color: #666;
      font-size: 14px;
    }
  }
}
</style>